<template>
  <div id="subclass-info-list">
    <div class="card">
      <div class="card-header bg-info text-white">行李额信息</div>
      <div class="card-body">
        <form class="row">
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="航空公司"
              v-model.trim="carrier0"
              size="10"
            />
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-2"
              @click.stop="search()"
            >
              查找
            </button>
            <a
              href="javascript:void(0)"
              class="ms-1"
              @click.stop="quickSearch('MU')"
              >MU</a
            >
            <a
              href="javascript:void(0)"
              class="ms-1"
              @click.stop="quickSearch('CZ')"
              >CZ</a
            >
            <a
              href="javascript:void(0)"
              class="ms-1"
              @click.stop="quickSearch('CA')"
              >CA</a
            >
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-2"
              @click.stop="resetSearch()"
            >
              重置
            </button>

            <template v-if="isDataAdmin">
              <a
                href="javascript:void(0)"
                class="btn btn-success ms-auto"
                @click="newLuggageInfo()"
                >新建</a
              >
            </template>
          </div>
        </form>
      </div>
    </div>
    <table class="table table-sm" v-if="inputing">
      <thead>
        <tr>
          <th class="text-center">航司</th>
          <th class="text-center">行李类型</th>
          <th class="text-center">舱位等级</th>
          <th class="text-center">标题</th>
          <th class="text-center">免费行李额</th>
          <th class="text-center">体积限定(件)</th>
          <th class="text-center">重量限定(件)</th>
          <th class="text-center">备注</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              class="form-control"
              　v-model="carrier"
              size="3"
            />
          </td>
          <td>
            <select class="form-select" v-model.number="luggageType">
              <option value="0">托运</option>
              <option value="1">非托运</option>
            </select>
          </td>
          <td>
            <select class="form-select" v-model.number="cabinType">
              <option value="10">头等舱</option>
              <option value="20">商务舱</option>
              <option value="30">经济舱</option>
              <option value="40">超级经济舱</option>
            </select>
          </td>
          <td>
            <input type="text" class="form-control" v-model.trim="title" />
          </td>
          <td>
            <input type="text" class="form-control" v-model.trim="freeLimit" />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.trim="volumeLimit"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.trim="weightLimit"
            />
          </td>
          <td>
            <input type="text" class="form-control" v-model.trim="remark" />
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="form-check" v-if="id === 0">
              <input
                type="checkbox"
                class="form-check-input"
                v-model="keepInputing"
              />
              <label class="form-check-label">继续录入</label>
            </div>
          </td>
          <td colspan="8">
            <button
              type="button"
              class="btn btn-primary"
              v-on:click="saveLuggageInfo()"
            >
              保存
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-5"
              v-on:click="closeInput()"
            >
              关闭
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="table table-striped table-sm" v-if="dataList.length > 0">
      <thead>
        <tr>
          <th class="text-center">航司</th>
          <th class="text-center">行李类型</th>
          <th class="text-center">舱位等级</th>
          <th class="text-center">标题</th>
          <th class="text-center">免费行李额</th>
          <th class="text-center">体积限定/件</th>
          <th class="text-center">重量限定/件</th>
          <th class="text-center">备注</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(info, index) in dataList" :key="index">
          <td class="text-center">{{ info.carrier }}</td>
          <td class="text-center">
            <span v-if="info.luggageType === 0" class="small">托运</span>
            <span v-if="info.luggageType === 1" class="small">非托运</span>
          </td>
          <td class="text-center">
            <span v-if="info.cabinType === 10" class="small">头等舱</span>
            <span v-if="info.cabinType === 20" class="small">商务舱</span>
            <span v-if="info.cabinType === 30" class="small">经济舱</span>
            <span v-if="info.cabinType === 40" class="small">超级经济舱</span>
          </td>
          <td class="text-center">{{ info.title }}</td>
          <td class="text-center">{{ info.freeLimit }}</td>
          <td class="text-center">{{ info.volumeLimit }}</td>
          <td class="text-center">{{ info.weightLimit }}</td>
          <td class="text-center">{{ info.remark }}</td>
          <td v-if="isDataAdmin">
            <a href="javascript:void(0)" v-on:click="editSubclass(index)"
              >修改</a
            >
            <a
              href="javascript:void(0)"
              v-on:click="copySubclass(index)"
              class="ms-2"
              >复制</a
            >
          </td>
        </tr>
      </tbody>
    </table>
    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination.vue";
import $ from "jquery";
import {
  searchLuggages,
  saveLuggageInfo,
  searchFlightConditionTimeWindow,
  saveFlightConditionTimeWindow,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },
      carrier0: "MU",
      subclass0: "",

      id: 0,
      carrier: "",
      luggageType: 0,
      cabinType: 30,
      freeLimit: "",
      volumeLimit: "",
      weightLimit: "",
      remark: "",
      title: "",

      dataList: [],

      keepInputing: false,
      inputing: false,
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    if (window.matchMedia("(max-width: 576px)").matches) {
      this.$router.replace("/h5/data/luggages");
    } else {
      this.search();
    }
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    quickSearch: function (carrier) {
      this.carrier0 = carrier;
      this.search();
    },
    search: function () {
      if (this.carrier0.length != 2) {
        this.showErrMsg("请先输入航司代码");
        return;
      }
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier0,
      };
      searchLuggages(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    reset: function () {
      this.id = 0;
      this.carrier = "";
      this.cabinType = 30;
      this.luggageType = 0;
      this.title = "";
      this.freeLimit = "";
      this.volumeLimit = "";
      this.weightLimit = "";
      this.remark = "";
    },
    newLuggageInfo: function () {
      this.reset();
      this.carrier = this.carrier0;
      this.inputing = true;
    },
    closeInput: function () {
      this.inputing = false;
    },
    saveLuggageInfo: function () {
      const params = {
        id: this.id,
        carrier: this.carrier,
        cabinType: this.cabinType,
        luggageType: this.luggageType,
        title: this.title,
        freeLimit: this.freeLimit,
        volumeLimit: this.volumeLimit,
        weightLimit: this.weightLimit,
        remark: this.remark,
      };

      // console.log(params)

      saveLuggageInfo(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          if (this.keepInputing === false) {
            // $('#modalNew').modal('hide')
            this.inputing = false;
          }

          this.search();
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg(jsonResult.errmsg);
        }
      });
    },
    editSubclass: function (index) {
      const info = this.dataList[index];

      this.id = info.id;
      this.carrier = info.carrier;
      this.luggageType = info.luggageType;
      this.cabinType = info.cabinType;
      this.title = info.title;
      this.freeLimit = info.freeLimit;
      this.volumeLimit = info.volumeLimit;
      this.weightLimit = info.weightLimit;
      this.remark = info.remark;

      this.keepInputing = false;

      this.inputing = true;
    },
    copySubclass: function (index) {
      this.editSubclass(index);
      this.id = 0;
    },
    showFeeRateDesc: function (feeRate) {
      if (feeRate == 0) {
        return "免费";
      } else {
        return feeRate + "%";
      }
    },
    showAllowDesc: function (status) {
      if (status === 0) {
        return "不允许";
      } else if (status === 1) {
        return "允许";
      } else {
        return status;
      }
    },
    resetSearch: function () {
      this.carrier0 = "";
      this.subclass0 = "";

      this.sc.pageNo = 1;
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
